
<template>
    <div class="dictionaryValue">
        <el-dialog draggable v-model="dialog.show" width="600px" :before-close="handleClose" class="custom-dialog">
            <template #header> {{ props.editData.id ? '修改' : '新增' }}明细 </template>
            <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100"
                class="dis-flex flex-dir-column flex-center">
                <el-form-item label="分类名称" prop="name">
                    <el-select v-model="forms.dictionaryTypeId" placeholder="分类名称" autofocus clearable class="width-220"
                        @change="onTypeChange">
                        <el-option v-for="n in forms.dictionaryTypes" :key="n.id" :label="n.name" :value="n.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="forms.dictionaryType === 5" label="税率" prop="name"> 
                    <z-input v-model="forms.name" placeholder="税率" class="width-200" autofocus clearable />&nbsp; %
                </el-form-item>
                <el-form-item v-else label="名称" prop="name">
                    <el-input v-model="forms.name" placeholder="名称" autofocus clearable class="width-220"></el-input>
                </el-form-item>
                <el-form-item v-if="forms.dictionaryType === 2" label="英文" prop="nameEn">
                    <el-input v-model="forms.nameEn" placeholder="英文" autofocus clearable class="width-220"></el-input>
                </el-form-item>
                <el-form-item v-if="forms.dictionaryType === 2" label="符号" prop="nameSym">
                    <el-input v-model="forms.nameSys" placeholder="符号" autofocus clearable class="width-220"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <z-button type="" @click="handleClose" icon="close">取消</z-button>
                    <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { post } from '@/api/index';
import { reactive } from 'vue';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue', 'onSave']);
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    editData: {
        type: Array,
        default: () => {
            return [];
        }
    } 
});
let dialog = reactive({
    show: false,
    options: [],
    loading: false
});
watch(
    () => props.modelValue,
    async val => {
        dialog.show = val;
        if (!val) return;
        let formData = formsInit();
        Object.keys(formData).map(r => {
            forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r]; 
        });
        if(forms.dictionaryType === 5) forms.name = forms.name.replace('%','');
    },
    {
        immediate: true
    }
);
let registerRef = ref();


const formsInit = () => {
    return reactive({
        name: '',
        nameEn: '',
        nameSym: '',
        dictionaryTypeId: 0,
        dictionaryType: 0,
        id: 0,
        dictionaryTypes: []
    });
}

let forms = formsInit();

let rules = {
    name: [{ required: true, trigger: 'blur', message: '名称不能为空!' }],
};

const onTypeChange = (val) => {
    if (val > 0) {
        forms.dictionaryTypeId = val;
        forms.dictionaryType = 10;
    } else {
        const sel = forms.dictionaryTypes.find(n => n.id === val);
        if (sel) {
            forms.dictionaryTypeId = val;
            forms.dictionaryType = sel.dictionaryType;
            console.log(forms.dictionaryType);
        }
    }
}

const handleClose = () => {
    emit('update:modelValue', false);
};
const onCheck = () => {
    if (!registerRef.value) return;
    registerRef.value.validate(async val => {
        if (!val) return;
        try {
            dialog.loading = true;
            if(forms.dictionaryType === 5) forms.name = forms.name + '%';
            await post('DictionaryValue/CreateOrUpdate', forms);
            $message.success('编辑成功');
            dialog.loading = false;
            emit('onSave', { dictionaryTypeId: forms.dictionaryTypeId, dictionaryType: forms.dictionaryType });
        } catch (error) {
            console.log('Category/CreateOrUpdate错误', error);
            dialog.loading = false;
        }
    });
};
</script>
  
<style lang="scss" scoped>
.classify {
    :deep(.custom-dialog) {
        .el-dialog__body {
            height: 200px;
        }
    }
}
</style>
  